<script setup>
import LightHeader from "@/components/LightHeader.vue";
import LightFooter from "@/components/LightFooter.vue";
import { reactive, ref, onMounted,onUnmounted } from 'vue';
onMounted(()=>{
    window.scrollTo(0, 0);
})
const goLogin = ()=>{
    window.location.href = "https://ai.a100-cn.com/#/login"
}
</script>
<template>
    <div class="wrap">
        <!-- 导航栏 -->
        <el-affix :offset="0">
            <LightHeader />
        </el-affix>
        <header>
            <div class="banner">
                <div class="content">
                    <div class="title">
                        <h3>引领行业创新浪潮<br>共绘算力时代赢跑蓝图</h3>
                        <p></p>
                        <h2>我们致力于成为<br>超算互联网服服务领域的佼佼者</h2>
                    </div>
                    <div class="area">
                        <p>目前已有：广东、安徽、浙江、河南、天津、北京、辽宁、上海、湖南、宁夏、江西、 广西、陕西、重庆、山东、四川、福建、甘肃、云南、新疆、贵州、河北、吉林、山西、
                            江苏、黑龙江、青海、湖北、国际公司、研究院、国信链、中科点击、集团各事业部等45家单位入驻云智AI平台</p>
                    </div>
                    <div class="btnBox">
                        <el-button color="#2F54EB" :loading="false" @click="goLogin()">伙伴入驻申请</el-button>
                    </div>
                </div>

            </div>
        </header>
        <main>
            <!-- 合作伙伴logo大图 -->
            <div class="cooperateLogo" data-aos="fade-up" data-aos-delay="300">
                <img src="@/assets/images/newImg/Frame49.png" alt="合作伙伴">
            </div>
            <!-- 我们将为您提供 -->
            <div class="provide" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>我们将为您提供</h3>
                </div>
                <div class="content">
                    <div class="ele">
                        <div class="left">
                            <h5>品牌资源</h5>
                            <span></span>
                            <p>增强品牌形象，提升品牌价值，实现业务增长<br>&nbsp;</p>

                        </div>
                        <div class="right">
                            <div class="imgBox">
                                <img src="@/assets/images/newImg/image17.png" alt="品牌资源">
                            </div>
                        </div>
                    </div>
                    <div class="ele">
                        <div class="left">
                            <h5>激励支持</h5>
                            <span></span>
                            <p>依托资源优势，提供计算服务资源优惠，助力<br>服务商产业升级</p>
                        </div>
                        <div class="right">
                            <div class="imgBox">
                                <img src="@/assets/images/newImg/image18.png" alt="激励支持">
                            </div>
                        </div>
                    </div>
                    <div class="ele">
                        <div class="left">
                            <h5>人才培训</h5>
                            <span></span>
                            <p>一站式培训赋能，助力合作服务商提升专业技能<br>&nbsp;</p>
                        </div>
                        <div class="right">
                            <div class="imgBox">
                                <img src="@/assets/images/newImg/image19.png" alt="人才培训">
                            </div>
                        </div>
                    </div>
                    <div class="ele">
                        <div class="left">
                            <h5>产业合作</h5>
                            <span></span>
                            <p>资源共享，促进技术不断创新，提升产品竞争力<br>&nbsp;</p>
                        </div>
                        <div class="right">
                            <div class="imgBox">
                                <img src="@/assets/images/newImg/image20.png" alt="产业合作">
                            </div>
                        </div>
                    </div>
                    <div class="ele">
                        <div class="left">
                            <h5>业务开拓</h5>
                            <span></span>
                            <p>销售&渠道推广支持，助力服务商业绩快速增长<br>&nbsp;</p>
                        </div>
                        <div class="right">
                            <div class="imgBox">
                                <img src="@/assets/images/newImg/image21.png" alt="业务开拓">
                            </div>
                        </div>
                    </div>
                    <div class="ele">
                        <div class="left">
                            <h5>服务商认证</h5>
                            <span></span>
                            <p>官方产品认证背书<br>&nbsp;</p>
                        </div>
                        <div class="right">
                            <div class="imgBox">
                                <img src="@/assets/images/newImg/image22.png" alt="服务商认证">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 伙伴等级 -->
            <!-- <div class="partnerLevel" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>伙伴等级与权益</h3>
                </div>
                <div class="imgBox">
                    <img src="@/assets/images/newImg/pic.png" alt="#">
                </div>
            </div> -->
            <!-- 合作伙伴加入流程 -->
            <div class="joinProcess" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>合作伙伴加入流程</h3>
                </div>
                <div class="btn">
                    <el-button color="#2F54EB" @click="goLogin">伙伴入驻申请</el-button>
                </div>
                <div class="joinContent">
                    <div class="enterprise">
                        <div class="top">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/Frame59.png" alt="#">
                            </div>
                            <p>企业入驻流程</p>
                        </div>
                        <div class="steps">
                            <ul>
                                <li>
                                    <div class="imgBox">
                                        <img src="@/assets/images/newImg/Frame77.png" alt="#">
                                    </div>
                                    <p>01账号注册</p>
                                </li>
                                <el-icon>
                                    <Right />
                                </el-icon>
                                <li>
                                    <div class="imgBox">
                                        <img src="@/assets/images/newImg/Frame78.png" alt="#">
                                    </div>
                                    <p>02企业实名认证</p>
                                </li>
                                <el-icon>
                                    <Right />
                                </el-icon>
                                <li>
                                    <div class="imgBox">
                                        <img src="@/assets/images/newImg/Frame79.png" alt="#">
                                    </div>
                                    <p>03提交申请</p>
                                </li>
                                <el-icon>
                                    <Right />
                                </el-icon>
                                <li>
                                    <div class="imgBox">
                                        <img src="@/assets/images/newImg/Frame80.png" alt="#">
                                    </div>
                                    <p>04审核完成</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="personal">
                        <div class="top">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/Frame90.png" alt="#">
                            </div>
                            <p>个人入驻流程</p>
                        </div>
                        <div class="steps">
                            <ul>
                                <li>
                                    <div class="imgBox">
                                        <img src="@/assets/images/newImg/Frame81.png" alt="#">
                                    </div>
                                    <p>01账号注册</p>
                                </li>
                                <el-icon>
                                    <Right />
                                </el-icon>
                                <li>
                                    <div class="imgBox">
                                        <img src="@/assets/images/newImg/Frame82.png" alt="#">
                                    </div>
                                    <p>02企业实名认证</p>
                                </li>
                                <el-icon>
                                    <Right />
                                </el-icon>
                                <li>
                                    <div class="imgBox">
                                        <img src="@/assets/images/newImg/Frame83.png" alt="#">
                                    </div>
                                    <p>03提交申请</p>
                                </li>
                                <el-icon>
                                    <Right />
                                </el-icon>
                                <li>
                                    <div class="imgBox">
                                        <img src="@/assets/images/newImg/Frame84.png" alt="#">
                                    </div>
                                    <p>04审核完成</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <!-- 伙伴入驻 -->
            <div id="join" class="join" data-aos="fade-up" data-aos-delay="300">
                <div class="content">
                    <div class="left">
                        <h4>云智算,期待您的加入</h4>
                        <p>让我们共同引领行业创新浪潮，共绘算力时代赢跑蓝图，我们致力于成为超算互联网服务领域的佼佼者</p>
                    </div>
                </div>

            </div>
            <div class="lightFooter" data-aos="fade-up" data-aos-delay="300">
                <LightFooter></LightFooter>
            </div>
        </footer>
    </div>
</template>

<style lang="scss" scoped>
@media (max-width: 768px) {
    header {
        width: 1400px !important;
    }
    .join{
        width: 1400px !important;
    }
}
.wrap {
    width: 100%;

    header {
        width: 100%;
        overflow: hidden;
        background: url(@/assets/images/newImg/Frame68.png)no-repeat center center/cover;
        // background-size: 100%;

        .banner {
            width: 100%;
            text-align: center;
            padding: 100px 0;
            box-sizing: border-box;


            .content {
                width: 1400px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: start;
                // background-color: skyblue;

                .title {
                    display: flex;
                    align-items: center;
                    text-align: left;

                    h3 {
                        font-weight: 300;
                        font-size: 24px;
                        line-height: 50px;
                    }

                    p {
                        height: 60px;
                        margin: 0 30px;
                        border: 1px solid #000;
                    }

                    h2 {
                        font-weight: 800;
                        font-size: 24px;
                        line-height: 50px;
                    }
                }

                .area {
                    width: 856px;
                    text-align: left;
                    margin-top: 30px;

                    p {
                        font-weight: 300;
                        font-size: 14px;
                        color: #576373;
                        line-height: 30px;
                    }
                }

                .btnBox {
                    margin-top: 54px;

                    button {
                        padding: 8px 20px;
                        box-sizing: border-box;
                    }
                }

            }

        }
    }

    main {
        width: 1400px;
        margin: 0 auto;

        .cooperateLogo {
            margin-top: 40px;
        }

        .provide {
            width: 100%;
            margin-top: 80px;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .content {

                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 50px;

                .ele {
                    width: 30%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.05), 4px 4px 10px 0px rgba(0, 0, 0, 0.05);
                    margin-bottom: 25px;
                    padding: 25px 15px;
                    box-sizing: border-box;

                    .left {
                        h5 {
                            font-weight: 600;
                            font-size: 20px;

                        }

                        span {
                            width: 75px;
                            height: 3px;
                            display: inline-block;
                            background-image: linear-gradient(to right, #85A5FF 70%, #F0F5FF 70%);
                            /* 使用渐变色设置下边框 */
                        }

                        p {
                            font-size: 14px;
                            margin-top: 20px;
                            line-height: 24px;
                        }
                    }
                }
            }
        }

        .partnerLevel {
            width: 100%;
            margin-top: 80px;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .imgBox {
                width: 100%;
                margin-top: 66px;

                img {
                    width: 100%;
                    display: block;
                }
            }
        }

        .joinProcess {
            width: 100%;
            margin-top: 80px;
            // background-color: goldenrod;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .btn {
                display: flex;
                justify-content: end;
                margin-top: 50px;
            }

            .joinContent {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;

                .enterprise,
                .personal {
                    width: 47%;

                    .top {
                        display: flex;
                        align-items: center;
                        background-color: #F7F8FA;
                        padding: 10px 30px;
                        box-sizing: border-box;

                        p {
                            margin-left: 5px;
                            font-weight: 600;
                            font-size: 20px;
                        }

                    }

                    .steps {
                        padding: 35px 10px;
                        box-sizing: border-box;
                        border: 1px dashed #d2d2d2;

                        ul {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            li {
                                text-align: center;
                                font-weight: 400;

                                p {
                                    margin-top: 20px;
                                    font-weight: 400;
                                }
                            }

                            i {
                                align-self: flex-end;
                            }
                        }
                    }
                }
            }
        }
    }

    footer {
        width: 100%;

        .join {
            width: 100%;
            padding: 60px 0;
            box-sizing: border-box;
            margin-top: 70px;
            background: url(@/assets/images/newImg/Frame26.png)no-repeat center center/cover;
            // background-size: 100%;

            .content {
                width: 1400px;
                margin: 0 auto;
                .left {
                    h4 {
                        font-weight: 600;
                        font-size: 28px;
                        margin-bottom: 40px;
                    }

                    p {
                        font-size: 14px;
                        color: #414A56;
                        line-height: 24px;
                    }
                }
            }

        }

    }
}
</style>